<template>
  <div class="home">
    <v-header />
    <div class="content">
      <div class="top">
        <div class="top-html">
          <p class="title"> 汇聚伙伴 分享利益</p>
          <p class="desc">6000亿企业存量短信、电呼、年增长近20%／1000万企业与用户电话、短信需求量亟待升级<br/>
更多的企业开始关注精准营销／身边的金融企业都需要失联找回</p>

        </div>
      </div>
      <div class="aitool">
        <h3>代理模式</h3>
        <div class="project">
          <ul >
            <li class="item" v-for="(item,index) in items" :key="index">
              <img :src=item.srcPic :alt=item.title>
              <p class="title" v-text="item.title"></p>
              <p class="content" v-html="item.content"></p>
            </li>
          </ul>
        </div>
      </div>
      <div class="advantage">
        <div class="wrap">
          <h4>加盟流程</h4>

          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/super1.png" alt="商务洽谈">
            </div>
            <div class="wrap-desc">商务洽谈</div>
          </div>
          <div class="plf-arrow">
            <img src="./images/arrow.png" >
          </div>
          <div class="wrap-item mar-r">
            <div class="wrap-pic">
              <img src="./images/super2.png" alt="资质审批">
            </div>
            <div class="wrap-desc">资质审批</div>
          </div>
          <div class="plf-arrow">
            <img src="./images/arrow.png" >
          </div>
          <div class="wrap-item">
            <div class="wrap-pic">
              <img src="./images/super3.png" alt="合同签署">
            </div>
            <div class="wrap-desc">合同签署</div>
          </div>
          <div class="plf-arrow">
            <img src="./images/arrow.png" >
          </div>
          <div class="wrap-item mar-r">
            <div class="wrap-pic">
              <img src="./images/super4.png" alt="共享市场">
            </div>
            <div class="wrap-desc">共享市场</div>
          </div>
          
        </div>
      </div>
      <div class="case">
        <h4>代理商风采</h4>
        <div class="case-list">
          <img :src=item.url :alt=item.title v-for="(item,index) in imgUrl" :key="index" />
        </div>
      </div>
      <div class="bottom">
        <div class="bottom-html">
          <p class="title"> 精诚合作  携手共赢</p>
          <p class="desc">加入新业务、新数据生态联盟<br/>
共同打造新一代流量入口平台！</p>

        </div>
      </div>
    </div>
    <v-contact/>
    <v-footer/>
  </div>
</template>
<script>
export default {
  data () {
    return {
      items:[
        {title:'区域行业代理商',content:'按行业领域划分<br/>指在一定行业领域从事信析宝<br/>业务通道代理机构',srcPic:require('./images/factor.png')},
        {title:'区域城市合伙人',content:'按地理区域划分<br/>指在一定区域从事信析宝短信<br/>业务通道代理机构',srcPic:require('./images/partner.png')},
        {title:'业务通道代理商',content:'指为客户企业提供来电秀、闪信<br/>和其他增值业务代理服务',srcPic:require('./images/gallery.png')}
      ],
      imgUrl:[
        {url:require('./images/laite.png'),title:'莱特科技'},
        {url:require('./images/xinao.png'),title:'新奥互联网'},
        {url:require('./images/handing.png'),title:'汉鼎科技'},
        {url:require('./images/xiangxun.png'),title:'享讯科技'},
        {url:require('./images/yimei.png'),title:'亿美软通'}
      ]
    }
  }
}
</script>
<style scoped>
.content{
  width: 100%;
  background-color: #fff;
  
}
.top{
  width: 100%;
  height: 400px;
  box-sizing: border-box;
  background: url('./images/league1.jpg') center/cover no-repeat;
}
.top .top-html{
  padding-top: 130px;
}
.top p{
  padding: 0;
  text-align: center;
}
.top p.title{
  color: #3DD18F;
  font-size: 25px;
}
.top p.desc{
  color: #fff;
  font-size: 20px;
  line-height: 30px;
}
.aitool{
  width: 100%;
  height: 360px;
}
.aitool h3{
  font-weight: 600;
  font-size: 24px;
  color: #3E4D60;
  text-align: center;
  box-sizing: content-box;
  margin: 0;
  padding: 30px 0 20px
}
.aitool .lost-desc{
  width: 1000px;
  margin: 0 auto;
  text-align: left;
  font-size: 14px;
  color: #333333;
  line-height: 25px;
}
.project{
  width: 1100px;
  margin: 0 auto;
}
.project ul{
  width: 100%;
  margin: 0;
  padding: 20px 0 0;
}
.project ul li{
  width: 33.3%;
  float: left;
  list-style: none
}
.project ul li.item p.title{
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 18px;
  color: #333333;
}
.project ul li.item p.content{
  font-size: 13px;
  color: #666666;
  line-height: 25px;
}

.advantage{
  width: 100%;
  height:400px;
  background: url('./images/league2.jpg') center/cover no-repeat;
}
.wrap{
  width: 1000px;
  margin: 0 auto;
}
.wrap h4{
  font-weight: 600;
  font-size: 24px;
  color: #FFFFFF;
  margin: 0 auto;
  padding: 40px 0 10px;
  box-sizing: content-box
}
.wrap .wrap-item{
  width: 180px;
  text-align: left;
  display: inline-block;
  margin-top: 40px;
}
.plf-arrow{
  display: inline-block;
  padding: 0 25px;
}
.plf-arrow img{
  vertical-align:100px
}
.wrap .wrap-item .wrap-pic{
  width: 100%;
  margin-bottom: 15px;
}
.wrap .wrap-item .wrap-pic img{
  width: 180px;
  height: 200px;
  vertical-align: middle;
}
.wrap .wrap-item .wrap-pic span{
  display: inline-block;
  color: #fff;
  margin-left: 20px;
  font-size: 20px;
}
.wrap .wrap-item .wrap-desc{
  width: 100%;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  color: #fff;
  line-height: 25px;
  margin-top: 10px;
}

.case{
  height: 240px;
  box-sizing: content-box;
}
.case h4{
  margin: 0 auto;
  font-weight: 600;
  text-align: center;
  font-size: 24px;
  color: #3E4D60;
  padding: 40px 0 30px;
}
.case .case-list{
  width: 1100px;
  margin: 0 auto
}
.case .case-list img{
  width: 190px;
  height: 60px;
  margin-bottom: 30px;
  display: block;
  float: left;
  margin-right: 35px;
}
.case .case-list img:nth-child(5n){
  margin-right: 0;
}
.bottom{
  width: 100%;
  height: 433px;
  box-sizing: border-box;
  background: url('./images/league3.jpg') center/cover no-repeat;
}
.bottom .bottom-html{
  padding-top: 150px;
}
.bottom p{
  padding: 0;
  text-align: center;
}
.bottom p.title{
  color: #3DD18F;
  font-size: 25px;
}
.bottom p.desc{
  color: #fff;
  font-size: 20px;
  line-height: 30px;
}
</style>
  